<!--
组件名称：
-->
<template>
    <div>
        <table class="table1">
            <thead>
              <tr>
                <th>产品名称</th>
                <th>公司名称</th>
                <th>云公司产品名称</th>
                <th>基于的芯片和操作系统</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in tableData" :key="index">
                  <td :rowspan="item['productspan'] || ''" v-if="item.product">{{ item.product }}</td>
                  <td :rowspan="item['companyspan'] || ''" v-if="item.company">{{ item.company }}</td>
                  <td :rowspan="item['productCloundNamespan'] || ''" v-if="item.productCloundName">{{ item.productCloundName }}</td>
                  <td :rowspan="item['baseOnSysspan'] || ''" v-if="item.baseOnSys">{{ item.baseOnSys }}</td>
              </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
export default {
    name: 'page1-tab1',
    data () {
      return {
        tableData: [
          { company: '华为技术有限公司', product: '华为鲲鹏处理器', productCloundName: '天翼云高可用关系型数据库系统V2.0', baseOnSys: '/' },
          { company: '华为技术有限公司', product: '华为鲲鹏处理器', productCloundName: '天翼云关系型数据库系统V2.0', baseOnSys: '/' },
          { company: '华为技术有限公司', product: '华为鲲鹏处理器', productCloundName: '天翼云web应用中间件系统V2.0', baseOnSys: '/' },
          { company: '华为技术有限公司', product: '华为鲲鹏处理器', productCloundName: '天翼云数据库HBase系统V1.0', baseOnSys: '/' },
          { company: '华为技术有限公司', product: '华为鲲鹏处理器', productCloundName: '天翼云分布式小文件系统CTDFSV1.0', baseOnSys: '/' },
          { company: '华为技术有限公司', product: '华为TaiShan 200系列服务器', productCloundName: '天翼云高可用关系型数据库系统V2.0', baseOnSys: '/' },
          { company: '华为技术有限公司', product: '华为TaiShan 200系列服务器', productCloundName: '天翼云关系型数据库系统V2.0', baseOnSys: '/' },
          { company: '华为技术有限公司', product: '华为TaiShan 200系列服务器', productCloundName: '天翼云web应用中间件系统V2.0', baseOnSys: '/' },
          { company: '华为技术有限公司', product: '华为TaiShan 200系列服务器', productCloundName: '天翼云数据库HBase系统V1.0', baseOnSys: '/' },
          { company: '华为技术有限公司', product: '华为TaiShan 200系列服务器', productCloundName: '天翼云分布式小文件系统CTDFSV1.0', baseOnSys: '/' },
          { company: '海光信息技术股份有限公司', product: '旗下产品Hygon 5280/Hygon 7280', productCloundName: '天翼云高可用关系型数据库系统V2.0', baseOnSys: '/' },
          { company: '海光信息技术股份有限公司', product: '旗下产品Hygon 5280/Hygon 7280', productCloundName: '天翼云关系型数据库系统V2.0', baseOnSys: '/' },
          { company: '海光信息技术股份有限公司', product: '旗下产品Hygon 5280/Hygon 7280', productCloundName: '天翼云web应用中间件系统V2.0', baseOnSys: '/' },
          { company: '海光信息技术股份有限公司', product: '旗下产品Hygon 5280/Hygon 7280', productCloundName: '天翼云数据库HBase系统V1.0', baseOnSys: '/' },
          { company: '海光信息技术股份有限公司', product: '旗下产品Hygon 5280/Hygon 7280', productCloundName: '天翼云分布式小文件系统CTDFSV1.0', baseOnSys: '/' },
          { company: '中科可控信息产业有限公司', product: '基于海光平台的服务器H620、H520系列', productCloundName: '天翼云高可用关系型数据库系统V2.0', baseOnSys: '/' },
          { company: '中科可控信息产业有限公司', product: '基于海光平台的服务器H620、H520系列', productCloundName: '天翼云关系型数据库系统V2.0', baseOnSys: '/' },
          { company: '中科可控信息产业有限公司', product: '基于海光平台的服务器H620、H520系列', productCloundName: '天翼云web应用中间件系统V2.0', baseOnSys: '/' },
          { company: '中科可控信息产业有限公司', product: '基于海光平台的服务器H620、H520系列', productCloundName: '天翼云数据库HBase系统V1.0', baseOnSys: '/' },
          { company: '中科可控信息产业有限公司', product: '基于海光平台的服务器H620、H520系列', productCloundName: '天翼云分布式小文件系统CTDFSV1.0', baseOnSys: '/' },
          { company: '麒麟软件有限公司', product: '银河麒麟高级服务器操作系统（鲲鹏版）V10、银河麒麟高级服务器操作系统（飞腾版）V10', productCloundName: '天翼云高可用关系型数据库系统V2.0', baseOnSys: '/' },
          { company: '麒麟软件有限公司', product: '银河麒麟高级服务器操作系统（鲲鹏版）V10、银河麒麟高级服务器操作系统（飞腾版）V10', productCloundName: '天翼云关系型数据库系统V2.0', baseOnSys: '/' },
          { company: '麒麟软件有限公司', product: '银河麒麟高级服务器操作系统（鲲鹏版）V10、银河麒麟高级服务器操作系统（飞腾版）V10', productCloundName: '天翼云web应用中间件系统V2.0', baseOnSys: '/' },
          { company: '麒麟软件有限公司', product: '银河麒麟高级服务器操作系统（鲲鹏版）V10、银河麒麟高级服务器操作系统（飞腾版）V10', productCloundName: '天翼云数据库HBase系统V1.0', baseOnSys: '/' },
          { company: '麒麟软件有限公司', product: '银河麒麟高级服务器操作系统（鲲鹏版）V10、银河麒麟高级服务器操作系统（飞腾版）V10', productCloundName: '天翼云分布式小文件系统CTDFSV1.0', baseOnSys: '/' },
          { company: '统信软件技术有限公司', product: '统信服务器操作系统V20', productCloundName: '天翼云高可用关系型数据库系统V2.0', baseOnSys: '/' },
          { company: '统信软件技术有限公司', product: '统信服务器操作系统V20', productCloundName: '天翼云关系型数据库系统V2.0', baseOnSys: '/' },
          { company: '统信软件技术有限公司', product: '统信服务器操作系统V20', productCloundName: '天翼云web应用中间件系统V2.0', baseOnSys: '/' },
          { company: '统信软件技术有限公司', product: '统信服务器操作系统V20', productCloundName: '天翼云数据库HBase系统V1.0', baseOnSys: '/' },
          { company: '统信软件技术有限公司', product: '统信服务器操作系统V20', productCloundName: '天翼云分布式小文件系统CTDFSV1.0', baseOnSys: '/' }
        ]
      }
    },
    created () {
      this.tableData = this.formatList(this.tableData)
      console.log(this.tableData)
    },
    methods: {
      formatList (list) {
        let map = {}
        const rowspanName = 'company'
        const formatList = list.map(item => {
          let rowspan = Object.assign({}, item)
          if (map[item[rowspanName]]) {
            map[item[rowspanName]] += 1
            rowspan[rowspanName] = ''
          } else {
            map[item[rowspanName]] = 1
          }
          return Object.assign({}, item, { [rowspanName]: rowspan[rowspanName] })
        })
        return formatList.map(item => {
          if (item[rowspanName] && map[item[rowspanName]]) {
            return Object.assign({}, item, { [`${rowspanName}span`]: map[item[rowspanName]] })
          } else {
            return Object.assign({}, item)
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
.table1 {
  width: 100%;
  border-collapse: collapse;
  line-height: 30px;
  th, td{
    font-size: 16px;
    font-weight: normal;
    padding: 0 20px;
    border: 1px solid rgba(255, 255, 255,.2);
  }
  th{
    background: #101010 ;
  }
}
</style>
